<template>
  <div class="product-container">
    <!-- 搜索区域 -->
<!--    <div class="search-section">-->
<!--      <el-form :inline="true" :model="searchForm">-->
<!--        <el-form-item label="类别">-->
<!--          <el-select v-model="searchForm.category" placeholder="请选择类别" clearable>-->
<!--            <el-option-->
<!--                v-for="item in categoryOptions"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="子类" style="margin-left: 10px;">-->
<!--          <el-select v-model="searchForm.subCategory" placeholder="请选择子类" clearable>-->
<!--            <el-option-->
<!--                v-for="item in subCategoryOptions2"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="产品名称" style="margin-left: 10px;">-->
<!--          <el-input v-model="searchForm.name" placeholder="请输入产品名称"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item style="margin-left: 10px;">-->
<!--          <el-button type="primary" @click="handleSearch">查询</el-button>-->
<!--          <el-button @click="resetSearch">重置</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->

    <!-- 操作按钮区域 -->
    <div class="operation-section">
      <el-button type="primary" @click="handleAdd">新增</el-button>
<!--      <el-button type="success" @click="handleStockIn">入库</el-button>-->
<!--      <el-button type="warning" @click="handleStockOut">出库</el-button>-->
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod">
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="category" label="类别" align="center"></el-table-column>
        <el-table-column prop="subCategory" label="子类" align="center"></el-table-column>
        <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
        <el-table-column prop="price" label="单价" align="center">
          <template slot-scope="scope">
            ¥{{ scope.row.price }}
          </template>
        </el-table-column>
<!--        <el-table-column prop="stock" label="库存" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <span :class="{'stock-warning': scope.row.stock <= scope.row.minStock}">-->
<!--              {{ scope.row.stock }}-->
<!--            </span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="medium" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="medium" type="danger" @click="handleEdit(scope.row)">删除</el-button>
<!--            <el-button size="medium" type="success" @click="handleQuickStockIn(scope.row)">入库</el-button>-->
<!--            <el-button size="medium" type="warning" @click="handleQuickStockOut(scope.row)">出库</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
<!--    <div class="pagination-section">-->
<!--      <el-pagination-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--          :current-page="pagination.currentPage"-->
<!--          :page-sizes="[10, 20, 50, 100]"-->
<!--          :page-size="pagination.pageSize"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="pagination.total">-->
<!--      </el-pagination>-->
<!--    </div>-->

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="550px" append-to-body>
      <el-form :model="formData" :rules="formRules" ref="productForm" label-width="120px" size="small">
        <el-form-item label="类别" prop="category">
          <el-select v-model="formData.category" placeholder="请选择类别" style="width: 100%"  @change="onChangeCategory">
            <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="子类" prop="subCategory">
          <el-select v-model="formData.subCategory" placeholder="请选择子类" style="width: 100%">
            <el-option
                v-for="item in subCategoryOptions2"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
<!--        <el-form-item label="库存" prop="stock">-->
<!--          <el-input-number v-model="formData.stock" :min="0" style="width: 100%"></el-input-number>-->
<!--        </el-form-item>-->
        <el-form-item label="是否自定义单价">
          <el-select v-model="formData.priceFlag" style="width: 100%" @change="onChangePriceFlag">
            <el-option value="0" label="否"></el-option>
            <el-option value="1" label="是"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="formData.priceFlag === '0'">
          <el-form-item label="单价" prop="price">
            <el-input-number v-model="formData.price" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </template>
        <el-form-item label="是否自定义数量">
          <el-select v-model="formData.quantityFlag" style="width: 100%" @change="onChangeQuantity">
            <el-option value="0" label="否"></el-option>
            <el-option value="1" label="是"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="是否需要折扣" prop="stock">-->
<!--          <el-select v-model="formData.discountFlag" style="width: 100%">-->
<!--            <el-option value="0" label="否"></el-option>-->
<!--            <el-option value="1" label="是"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <template v-if="formData.discountFlag === '1'">
          <el-form-item
              v-for="(v, i) in formData.discounts"
              :key="i"
              :label="v.discountName"
          >
            <el-input-number v-model="v.discountValue" :max="1" style="width: 100%"></el-input-number>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 入库弹窗 -->
    <el-dialog title="入库" :visible.sync="stockInDialogVisible" width="400px" append-to-body>
      <el-form :model="stockForm" :rules="stockRules" ref="stockInForm" label-width="100px">
        <el-form-item label="产品" prop="productId">
          <el-select v-model="stockForm.productId" placeholder="请选择产品" style="width: 100%">
            <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库数量" prop="quantity">
          <el-input-number v-model="stockForm.quantity" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="stockForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="stockInDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitStockIn">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 出库弹窗 -->
    <el-dialog title="出库" :visible.sync="stockOutDialogVisible" width="400px" append-to-body>
      <el-form :model="stockForm" :rules="stockRules" ref="stockOutForm" label-width="100px">
        <el-form-item label="产品" prop="productId">
          <el-select v-model="stockForm.productId" placeholder="请选择产品" style="width: 100%">
            <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库数量" prop="quantity">
          <el-input-number v-model="stockForm.quantity" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="stockForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="stockOutDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitStockOut">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./product.js"/>

<style lang="scss" scoped src="./product.scss"/>